<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工信息管理</title>
    <style>
        table {
            border-collapse: collapse;
            margin: 20px auto;
        }

        table, th, td {
            border: 1px solid black;
            padding: 8px;
        }

        th {
            background-color: #f2f2f2;
        }

        .form-container {
            width: 250px;
            margin: 20px auto;
            border: 1px solid #ccc;
            padding: 20px;
        }

        .form-container label {
            display: block;
            margin-bottom: 5px;
        }

        .form-container input {
            width: 100%;
            padding: 5px;
            margin-bottom: 10px;
        }

        .form-container button {
            display: block;
            width: 100%;
            padding: 5px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>

<table>
    <thead>
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>Action</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Jerry</td>
        <td>jerry@sohu.com</td>
        <td>8000</td>
        <td><a href="#" onclick="deleteRecord(this)">Delete</a></td>
    </tr>
    </tbody>
</table>

<div class="form-container">
    <h3>添加新员工</h3>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <label for="salary">Salary:</label>
    <input type="number" id="salary" name="salary">

    <button onclick="addEmployee()">提  交</button>
</div>

<script>
    function addEmployee() {
        // 获取输入值
        const name = document.getElementById('name').value;
        const email = document.getElementById('email').value;
        const salary = document.getElementById('salary').value;

        // 创建新行tr
        const newRow = document.createElement('tr');

        // 创建单元格name td
        const nameCell = document.createElement('td');
        nameCell.textContent = name; // 设置单元格的内容为上面输入框的值

        // 创建单元格email td
        const emailCell = document.createElement('td');
        emailCell.textContent = email;  // 设置单元格的内容为上面输入框的值

        // 创建单元格salary td
        const salaryCell = document.createElement('td');
        salaryCell.textContent = salary;  // 设置单元格的内容为上面输入框的值

        // 创建单元格放delete链接
        const actionCell = document.createElement('td');
        const deleteLink = document.createElement('a');
        deleteLink.href = '#';  // 链接地址
        deleteLink.textContent = 'Delete'; // 链接文字
        deleteLink.onclick = function () {
            deleteRecord(this);
        };
        // 将链接a添加到单元格
        actionCell.appendChild(deleteLink);

        // 将单元格添加到新行
        newRow.appendChild(nameCell);
        newRow.appendChild(emailCell);
        newRow.appendChild(salaryCell);
        newRow.appendChild(actionCell);

        // 将新行添加到表格
        document.querySelector('table tbody').appendChild(newRow);

        // 添加成功之后清空输入框
        document.getElementById('name').value = '';
        document.getElementById('email').value = '';
        document.getElementById('salary').value = '';
    }

    function deleteRecord(element) {
        // 删除对应的行，closest() 方法返回匹配选择器的第一个祖先元素。
        element.closest('tr').remove();
    }
</script>

</body>
</html>
